<template>
  <view class="page-container">
    <!-- 顶部导航 -->
    <page-header title="添加待办" :showBack="true"> </page-header>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 待办内容输入 -->
      <view class="form-item">
        <view class="form-label">待办内容</view>
        <view class="form-input-container">
          <textarea
            class="todo-input"
            v-model="todoContent"
            placeholder="请输入待办内容"
            auto-height
          />
        </view>
      </view>

      <!-- 标签选择 -->
      <view class="form-item">
        <view class="form-label">标签</view>
        <view class="tags-container">
          <view
            v-for="(tag, index) in availableTags"
            :key="index"
            class="tag-item"
            :class="{ 'tag-selected': selectedTags.includes(tag.id) }"
            @click="toggleTag(tag.id)"
          >
            {{ tag.name }}
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="buttons">
        <button class="btn cancel-btn" @click="goBack">取消</button>
        <button class="btn save-btn" @click="saveTodo">添加</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import pageHeader from "@/components/pageHeader.vue";
import { todoApi, tagApi } from "@/api";

// 初始化数据
const todoContent = ref("");
const selectedTags = ref([]);

// 可选标签（从API获取）
const availableTags = ref([]);

// 获取全部标签
const loadAllLabels = async () => {
  try {
    const res = await tagApi.getLabelList();
    if (res.success && res.data) {
      availableTags.value = res.data.map((item) => ({
        id: item.id,
        name: item.name,
      }));
    }
  } catch (error) {
    console.error("获取标签列表失败:", error);
  }
};

// 切换标签选择状态
const toggleTag = (tagId) => {
  const index = selectedTags.value.indexOf(tagId);
  if (index === -1) {
    selectedTags.value.push(tagId);
  } else {
    selectedTags.value.splice(index, 1);
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 保存待办
const saveTodo = async () => {
  if (!todoContent.value.trim()) {
    uni.showToast({
      title: "请输入待办内容",
      icon: "none",
    });
    return;
  }

  try {
    // 构建API请求参数
    const addData = {
      content: todoContent.value.trim(),
      labels: selectedTags.value,
    };

    // 调用添加API
    const res = await todoApi.addTodo(addData);

    if (res.success) {
      // 通知首页重新获取数据
      uni.$emit("refreshTodoList");

      uni.navigateBack();
      uni.showToast({
        title: "添加成功",
        icon: "success",
      });
    } else {
      uni.showToast({
        title: res.msg || "添加失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("添加待办失败:", error);
    uni.showToast({
      title: "添加失败，请重试",
      icon: "none",
    });
  }
};

// 页面加载时获取标签
onMounted(async () => {
  await loadAllLabels();
});
</script>

<style>
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-label {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 15rpx;
}

.form-input-container {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.todo-input {
  width: 100%;
  min-height: 180rpx;
  font-size: 30rpx;
  padding: 10rpx 0;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tag-item {
  padding: 10rpx 24rpx;
  font-size: 26rpx;
  background-color: #f0f0f0;
  color: #666666;
  border-radius: 30rpx;
  border: 1px solid transparent;
}

.tag-selected {
  background-color: #e6eaff;
  color: #4361ee;
  border: 1px solid #4361ee;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 60rpx;
  padding: 0 20rpx;
}

.btn {
  width: 45%;
  border-radius: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666666;
  border: 1px solid #dddddd;
}

.save-btn {
  background-color: #4361ee;
  color: #ffffff;
}
</style>
